<form id="accountForm" name="accountForm"
      METHOD="POST" ACTION="<?= $_SERVER['PHP_SELF']; ?>"  
      onsubmit="return UTSDK.VALIDATION.validate('accountForm')">
    <input type="hidden" name="formSource" value="cAccount"/>
    <input type="hidden" name="action" value="create"/>
    <table>
        <tr>
            <td><label>User Account: </label></td>
            <td>
                <select id="userAccount" name="person" data-default="null"
                        data-validation="select" data-validationmessage="User account must be chosen"
                        data-required="false">
                    <option value="null">Create New</option>
                </select>
            </td>
            <td><label id="userAccountError"></label></td>
        </tr>
        <tr>
            <td><label>Account Type: </label></td>
            <td>
                <select id="accountType" name="accountType" disabled="disabled" data-default="volunteer">
                    <option value="admin">Administrator</option> 
                    <option value="eventmanager">Event Manager</option> 
                    <option value="volunteer" selected="selected">Volunteer</option> 
                    <option value="sprout">SPROUT</option> 
                </select>
            </td>
            <td><label id="accountTypeError"></label></td>
        </tr>
        <tr>
            <td><label>First Name: </label></td>
            <td><input id="firstName" type="text" name="firstName" placeholder="First name"
                       data-validation="name" data-maxlength="35"/></td>
            <td><label id="firstNameError"></label></td>
        </tr>
        <tr>
            <td><label>Last Name: </label></td>
            <td><input id="lastName" type="text" name="lastName" placeholder="Last name"
                       data-validation="name" data-maxlength="35"/></td>
            <td><label id="lastNameError"></label></td>
        </tr>
        <tr class="hidden" id="staffIdParent">
            <td><label>Staff ID: </label></td>
            <td><input id="staffId" type="text" name="staffId" placeholder="Staff ID"
                       data-required="false" data-validation="id" data-validationmessage="Not a valid ID"/></td>
            <td><label id="staffIdError"></label></td>
        </tr>
        <tr>
            <td><label>Email: </label></td>
            <td><input id="email" type="text" name="email" placeholder="email@domain.com"
                       data-validation="email" data-validationmessage="Not a valid email"/></td>
            <td><label id="emailError"></label></td>
        </tr>
        <tr>
            <td><label>Password: </label></td>
            <td><input id="newPassword" type="password" name="newPassword" placeholder="Password"
                       data-validation="password" data-validationmessage="Password required for new account"
                       data-required="true"/></td>
            <td><label id="newPasswordError"></label></td>
        </tr>
        <tr>
            <td><label>Retype Password: </label></td>
            <td><input id="newRetypePassword" type="password" name="newRetypePassword" placeholder="Password"
                       data-validation="password" data-validationmessage="Password required for new account"
                       data-required="true" data-match="newPassword"/></td>
            <td><label id="newRetypePasswordError"></label></td>
        </tr>
        <tr>
            <td><label>Skills: </label></td>
            <td><input id="skills" type="text" name="skills" placeholder="Skills"
                       data-required="false"/></td>
            <td><label id="skillsError"></label></td>
        </tr>
        <tr>
            <td><label>Gender: </label></td>
            <td><div class="selectDiv">
                    <select id="gender" name="gender" data-default="M">
                        <option value="M">Male</option>
                        <option value="F">Female</option>
                        <option value="O">Other</option>
                    </select>
                </div></td>
            <td><label id="genderError"></label></td>
        </tr>
        <tr>
            <td><label>Contact Number: </label></td>
            <td><input id="contactNumber" type="text" name="contactNumber" placeholder="Contact number"
                       data-validation="number" data-validationmessage="Not a valid contact number"
                       data-maxlength="20"/></td> 
            <td><label id="contactNumberError"></label></td>
        </tr>
        <tr>
            <td><label>Address: </label></td>
            <td><input id="address" type="text" name="address" placeholder="Address"
                       data-validation="text" data-validationmessage="Must not be empty"
                       data-required="false"/></td>
            <td><label id="addressError"></label></td>
        </tr>
        <tr>
            <td><label>Deactivate Account: </label></td>
            <td><div class="selectDiv">
                    <select id="activated" name="activated" data-default="false">
                        <option value="true">Activated</option>
                        <option value="false" selected="selected">Deactivated</option>
                    </select>
                </div></td>
            <td><label id="activatedError"></label></td>
        </tr>
        <tr>
            <td><label>Member Since: </label></td>
            <td><input id="datecreated" type="text" name="datecreated"
                       data-required="false" disabled="disabled" class="disabled"/></td>
            <td><label id="datecreatedError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Create" id="accountSubmit"/></td>
            <td><label id="submitError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" style="display:none" type="button" value="Delete" id="accountDelete"/></td>
            <td></td>
        </tr>
    </table>
    <script>
        var accountForm = (function() {
            var account = UTSDK.$("userAccount");
            var accountType = UTSDK.$("accountType");
            var staffId = UTSDK.$("staffId");
            var staffIdParent = UTSDK.$("staffIdParent");
            accountType.addEventListener("change", function() {
                if (accountType.value === "eventmanager") {
                    UTSDK.removeClass(staffIdParent, "hidden");
                    staffId.setAttribute("data-required", "true");
                }
                else {
                    UTSDK.addClass(staffIdParent, "hidden");
                    staffId.setAttribute("data-required", "false");
                }
            });
            account.addEventListener("change", function() {
                if(account.value === "null"){
                    UTSDK.enable(UTSDK.$("newPassword"));
                    UTSDK.enable(UTSDK.$("newRetypePassword"));
                }
                else{
                    UTSDK.disable(UTSDK.$("newPassword"));
                    UTSDK.disable(UTSDK.$("newRetypePassword"));
                }
            });
        })();
    </script>
</form>